<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{css/font.css}">
    <link rel="stylesheet" th:href="@{css/xadmin.css}">

    <script th:src="@{lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .layui-table[lay-size="sm"] td, .layui-table[lay-size="sm"] th {
            font-size: 12px;
            padding: 5px 5px 5px 5px;
        }


        .layui-layer, layui-layer-title {
            background-color: transparent !important;
        }

        .layui-select-title {
            padding: 4px !important;
        }

    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<!--<div class="layui-fluid">-->

<div class="layui-row layui-col-space15">


    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space18">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <!---图形大小和显示的盒子长宽有关系-->

                            <div class="layui-card-header">
                                <div class="layui-row layui-col-space1">
                                    <div class="layui-col-md4">
                                        <div class="layui-btn-group">
                                            <button class="layui-btn  layui-btn-normal " onclick="getOrginData();"
                                                    id="orgin_data" lay-submit="">
                                                <i
                                                        class="layui-icon">&#xe62c;</i>原始数据
                                            </button>

                                            <button class="layui-btn  layui-btn-normal" lay-submit=""><i
                                                    class="layui-icon">&#xe62c;</i>瞬时傅里叶变换
                                            </button>

                                            <button class="layui-btn  layui-btn-normal" lay-submit=""><i
                                                    class="layui-icon">&#xe62c;</i>小波变换
                                            </button>

                                            <button class="layui-btn layui-btn-normal" lay-submit=""><i
                                                    class="layui-icon">&#xe62c;</i>均值变换
                                            </button>

                                        </div>
                                    </div>

                                    <div class="layui-col-md2">
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item">

                                                <label class="layui-form-label">步长</label>
                                                <div class="layui-input-block">
                                                    <select name="interest" lay-filter="aihao" style="padding: 1px;">
                                                        <option value="" selected=""></option>
                                                        <option value="0">0.1</option>
                                                        <option value="1">0.25</option>
                                                        <option value="2">0.5</option>
                                                        <option value="3">1</option>
                                                    </select>
                                                </div>

                                            </div>

                                        </form>
                                    </div>
                                    <div class="layui-col-md2">
                                        <form class="layui-form" action="">


                                            <div class="layui-form-item">

                                                <label class="layui-form-label">插值算法</label>
                                                <div class="layui-input-block">
                                                    <select name="interest" lay-filter="aihao" style="padding: 1px;">
                                                        <option value="" selected=""></option>
                                                        <option value="0">插值算法1</option>
                                                        <option value="1">插值算法2</option>
                                                        <option value="2">插值算法3</option>
                                                        <option value="3">插值算法4</option>
                                                    </select>
                                                </div>

                                            </div>

                                        </form>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-btn-group">
                                            <button class="layui-btn  layui-btn-radius" lay-submit=""
                                                    onclick="constructBall();"><i
                                                    class="layui-icon">&#xe67c;</i>构建声学球
                                            </button>
                                            <button class="layui-btn  " lay-subimt=""
                                                    onclick="display3Dball(this);"><i
                                                    class="layui-icon">&#xe7ae;</i>3D声学球显   示
                                            </button>
                                            <button class="layui-btn  " lay-submit=""
                                                    onclick="display2Dball()(this);"><i
                                                    class="layui-icon">&#xe7ae;</i>2D声学球显示
                                            </button>

                                            <button class="layui-btn  layui-btn-radius"
                                                    onclick="save()"><i
                                                    class="layui-icon">&#xe67c;</i>声学球的存储
                                            </button>

                                        </div>
                                    </div>

                                </div>


                            </div>
                            <div class="layui-card-body" style="min-weight: 500px;">
                                <div id="main1" class="layui-col-sm12"
                                     style="width:1000px;height: 300px;"></div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <!---图形大小和显示的盒子长宽有关系-->
                            <div class="layui-card-header">


                                <div class="layui-card-body" style="min-weight: 500px;">
                                    <div id="main2" class="layui-col-sm12"
                                         style="width:1000px;height: 272px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">

    </div>
</div>

    <!--</div>-->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

    <!--    导入插值算法-->
    <script type="text/javascript" th:src="@{js/kriging.js}"></script>

    <script>


        layui.use('form', function () {
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        });

        /*构造声学球*/
        function constructBall() {

   /*         var index = layer.load(1, {
                shade: [0.1, '#fff'],//0.1透明度的白色背景
                time: 1000,

            });*/

            $.ajax({
                //请求方式
                type: 'GET',
                //路径
                url: '/constructBall',
                //传递的参数

                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                //返回的数据类型
                dataType: "json",

                success: function (data_train) {
                   // console.log(data_train);
                    var msg = data = data_train.msg
                    alert(msg)
                    if (msg=="success") {
                        function generateTestData(n) {
                            var x = [];
                            var y = [];
                            var t = [];

                            // create a fake dataset where t is 100 when lat is east
                            for (var i = 0; i < n; i++) {
                                x[i] = (-180) + Math.random() * 360;
                                y[i] = Math.random() * 180;
                                t[i] = Math.random() * 100;
                            }
                            return [t, x, y];
                        }

                        var data_t = generateTestData(500);

                        console.log(data_t);

                        var variogram = kriging.train(data_t[0], data_t[1], data_t[2], "exponential", 4, 50);

                        alert("ok");
                        var data = [];

                        for (var v = 0; v <= Math.PI; v = v + (Math.PI / 40)) {
                            for (var u = -Math.PI; u <= Math.PI; u += (Math.PI / 40)) {
                                x = Math.sin(v) * Math.sin(u);
                                y = Math.sin(v) * Math.cos(u);
                                z = Math.cos(v);
                                data.push([x, y, z, u, v, kriging.predict(u, v, variogram)]);
                            }

                        }
                        console.log(data);
                    } else {
                        alert(msg);
                    }
                }

            });


        }

        /*图标显示*/


        var chartDom = document.getElementById('main1');

        var myChart1 = echarts.init(chartDom);
        var option;

        //数据
        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        option = {
            animationDuration: 10000,
            tooltip: {
                order: 'valueDesc',
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10
            }],
            series: []
        };


        option && myChart1.setOption(option);
        // 基于准备好的dom，初始化echarts实例


        // 基于准备好的dom，初始化echarts实例
        var chartDom = document.getElementById('main2');

        var myChart2 = echarts.init(chartDom);

        // 指定图表的配置项和数据
        option = {
            animationDuration: 10000,
            tooltip: {
                order: 'valueDesc',
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                text: '噪声数据图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10
            }],
            legend: {
                data: ['模拟数据']
            },
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    },
                    data: data
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        option && myChart2.setOption(option);


        function getOrginData() {
            //ajax请求
            $.ajax({
                //请求方式
                type: 'GET',
                //路径
                url: '/originDataDisPlay',
                //传递的参数

                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                //返回的数据类型
                dataType: "json",


                success: function (data) {
                    var num_spl = data.numVocal;
                    var seriesList = [];
                    var legendList = [];
                    //  alert(num_spl);
                    console.log(data.Vocal_tract);
                    var dataarr = data.Vocal_tract;
                    for (var i = 0; i < num_spl; i++) {
                        legendList.push('声道' + i)
                        seriesList.push({
                            name: '声道' + i,
                            type: 'line',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: 'rgb(' + Math.random() * 255 + ', ' + Math.random() * 255 + ', ' + Math.random() * 255 + ')'
                            },
                            animationDuration: 1000,
                            tooltip: {
                                order: 'valueDesc',
                                trigger: 'axis',
                                position: function (pt) {
                                    return [pt[0], '10%'];
                                }
                            },
                            endLabel: {
                                show: true,
                                formatter: function (params) {
                                    return params.value[3] + ': ' + params.value[0];
                                }
                            },
                            labelLayout: {
                                moveOverlap: 'shiftY'
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            areaStyle: {},
                            /*          areaStyle: {
                                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                              offset: 0,
                                              color: 'rgb('+Math.random()*255+', '+Math.random()*255+', '+Math.random()*255+')'
                                          }, {
                                              offset: 1,
                                              color: 'rgb('+Math.random()*255+', '+Math.random()*255+', '+Math.random()*255+')'
                                          }])
                                      },*/
                            data: dataarr[i]
                        });

                    }

                    myChart1.setOption({
                        xAxis: {
                            data: data.time
                        },
                        legend: {
                            data: legendList
                        },
                        series: seriesList
                    });
                },
                error: function (data) {
                    alert(data.msg);
                }
            });
        }

        //三维声学球显示
        function display3Dball() {

            //弹出选择框输入信息
            layer.open({
                type: 2,
                area: ['940px', '500px'],

                anim: 3,
                shade: 0,
                shadeClose: false,
                title: "声学球显示",
                offset: 'rb',
                id: 'display3Dball',//设定一个id，防止重复弹出
                resize: false,
                skin: 'layui-layer-molv',// layui-layer-lan	layui-layer-rim
                shadeClose: true, //点击遮罩关闭
                scrollbar: false,
                content: 'member-3DNoise',
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    $(".layui-layer").css("background-color: transparent !important;");
                }

            });
        }

        //二维声学球显示
        function display2Dball() {

            //弹出选择框输入信息
            layer.open({
                type: 2,
                area: ['600px', '320px'],

                anim: 3,
                shade: 0,
                shadeClose: false,

                resize: false,
                title: "声学球显示",
                offset: 'rb',
                id: 'display2Dball',//设定一个id，防止重复弹出
                skin: 'layui-layer-molv',// layui-layer-lan	layui-layer-rim
                shadeClose: true, //点击遮罩关闭
                content: 'member-2DNoise.html',
                scrollbar: false,
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);

                    //获取新窗口对象
                    var iframeWindow = layero.find('iframe')[0].contentWindow;
                    //重新渲染
                    iframeWindow.layui.form.render();
                }

            });
        }

        /*用户-停用*/
        function member_stop(obj, id) {
            //弹出选择框输入信息
            layer.open({
                type: 2,
                area: ['550px', '230px'],
                shadeClose: true, //点击遮罩关闭
                content: 'member-timeprop.html',
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);

                    setTimeflag(obj);
                }

            });
            /*layer.confirm('确认要停用吗？', function (index) {*/

        }

        function setTimeflag(obj) {
            if ($(obj).attr('title') == '时间同步') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '时间同步完毕')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已同步');
                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').css("background", "green");
                //layer.msg('已停用!', {icon: 5, time: 1000});

            }
        }


        function delAll(argument) {

            var data = tableCheck.getData();

            layer.confirm('确认要恢复吗？' + data, function (index) {
                //捉到所有被选中的，发异步进行删除
                layer.msg('恢复成功', {icon: 1});
                $(".layui-form-checked").not('.header').parents('tr').remove();
            });
        }

        //声学球的存储
        function save(){
            console.log("声学球存储成功!!!");
        }
    </script>
    <script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
</body>

</html>